<template>
  <div class="sales">
     <Navs :navtitle="titles"></Navs>
     <div class="header">
       <p>
          <span>{{list.totalOrder}}</span>
          <span class="span-two">交易订单数</span>
       </p>
       <p >
          <span>￥{{list.totalMoney}}</span>
          <span class="span-two">店铺交易额</span>
       </p>
       <p>
          <span>{{list.totalAccess}}</span>
          <span class="span-two">昨日访问量</span>
       </p>
     </div>
     <div class=container>
        <ul class="list">
            <li v-for="(item,index) in data" :key="index">
                <router-link tag="span" :to=item.to class="router">
                    <img :src="item.img" alt="">
                    <span>{{item.name}}</span>
                </router-link>
                
            </li>
        </ul>
     </div>
  </div>
</template>

<script>
import Navs from '../../components/Navbar'
export default {
   components:{
       Navs
   },
   data(){
       return{
            titles:'我的小店',
            data:[{img:require('../../assets/image/ic_wxIndex.png'),name:'店铺管理',to:'management'},
                  {img:require('../../assets/image/ic_goods.png'),name:'商品管理',to:'commodity'},
                  {img:require('../../assets/image/ic_bill.png'),name:'对账单',to:'bill'},
                  {img:require('../../assets/image/ic_analyze.png'),name:'经营分析',to:'/Canvas'},
                  {img:require('../../assets/image/ic_orderManage.png'),name:'订单管理',to:'orders'},
                  {img:require('../../assets/image/ic_staffManage.png'),name:'员工管理',to:'staff'},
                  {img:require('../../assets/image/ic_shopSet.png'),name:'门店设置',to:'/StoreSettings'},
                  {img:require('../../assets/image/ic_member.png'),name:'客户管理',to:'/client'},
                  {img:require('../../assets/image/ic_team_buy.png'),name:'团购管理',to:'/group'},
                 ],
                 list:'',
              
            
       }
   },
   methods:{
        InsertShopInfoByMerchant(){
            let orgId=this.$store.state.merchantInfo.orgId
            let groupId=this.$store.state.merchantInfo.groupId
            let merchantId=this.$store.state.merchantInfo.merchantId
            this.$http.post('https://web-gateway.newbeescm.com/ms-web/shopInfoController/InsertShopInfoByMerchant?orgId='+orgId+'&groupId='+groupId+'&merchantId='+merchantId)
            .then(res=>{
                 if(res.data.status.statusCode===0){
                console.log(res.data.result)
                this.InsertShop(res.data.result.id)
                this.$store.commit('setsales',res.data.result)
                 }
                console.log(res.data.result.id)
                this.$store.commit('setStoreSettingsid',res.data.result)
            })
            .catch(err=>{
                console.log(err)
            })
        },
        getMpInfoForApp(){
            let headers;
            if (this.$store.state.token) {
                headers = {
                token: this.$store.state.token,
                userId: this.$store.state.userInfo.id
                };
            } else {
                headers = {};
            }
            let merchantId=this.$store.state.merchantInfo.merchantId
            this.$http.post('https://web-gateway.newbeescm.com/fw-scm-wxplatform-web/wxApp/getMpInfoForApp',{
                merchantId:merchantId
            },{
                headers
            }
            )
            .then(res=>{
                console.log(res)
            })
            .catch(err=>{
                console.log(err)
            })
        },
        InsertShop(id){
            let merchantId=this.$store.state.merchantInfo.merchantId
            this.$http.get('https://web-gateway.newbeescm.com/ms-web/shopInfoController/totalInfo/'+id)
            .then(res=>{
                console.log(res)
                this.list=res.data.result
            })
            .catch(err=>{
                console.log(err)
            })
        },
    },
    created(){
        this.InsertShopInfoByMerchant()
        this.getMpInfoForApp()
    }
}

</script>
<style scoped lang="scss">
.header{
    display:flex;
    align-items: center;
    text-align:center;
    padding:0.30rem 0 0.33rem 0;
    background:linear-gradient(to right, #d33 0%,#f36539 100%);
    color:#fff;
    p{
        width:33%;
        font-size:0.2rem;
        display: flex;
        flex-direction: column;
        .span-two{
            margin-top:0.1rem;
            font-size:0.12rem;
        }
    }
}
.container{
    display:flex;
    flex-wrap:wrap;
    font-size:0.12rem;
   .list{
       width:100%;
       display: flex;
       flex-direction: row;
       flex-wrap:wrap;
       li{
            border-right:0.01rem solid #f2f1f6;
            border-bottom:0.01rem solid #f2f1f6;
            width:33%;
            color:#666666;
            text-align:center;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            height:1.25rem;
            // position:relative;
            font-size:0.12rem;
            .router{
                   display:flex;
                    flex-direction:column;
                    align-items:center;
                    justify-content:center;
                img{
                    width:0.23rem;
                    height:0.23rem;
                    margin-bottom:0.09rem;
                    display: inline-block;

                }
            }
         
       }
   }
}
</style>